{% extends "main_ui_template.html" %}


{% block title %}
    测试信息平台
{% endblock %}

{% block body %}
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!--<div id="piemain" style="height:400px"></div>-->
    <h2 style="text-align: center">自动用例分布一览</h2>
    <div id="barmain" style="height:540px"></div>
    <!-- ECharts单文件引入 -->
    <script src="{{ url_for('static', filename='js/echarts.js') }}"></script>
    <script type="text/javascript">
        var data = {{ daily_case|tojson }};
        var name_array = new Array();
        var number_array = new Array();
        var j = 0
        var max_number = data[0][1];
        var count_case_number = 0;
        for (var i in data) {
            if (j % 2 != 0){
                name_array[j] = '\n' + data[i][0];
            }
            else{
                name_array[j] = data[i][0];
            }
            number_array[j] = data[i][1];
            count_case_number += data[i][1];
            j++;
        }

        while (max_number % 50 != 0)
        {
            max_number++;
        }
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie',
                'echarts/chart/bar'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表

                 // -----barChart start-----
                var barChart = ec.init(document.getElementById("barmain"));
                <!--window.onresize = barChart.resize;-->
                <!--barChart.showLoading();-->
                option={
                    title : {
                        'text':'总数：' + count_case_number,
                        //'subtext':'数据来自Zeus-robot',
                        'textStyle': {
                            fontSize: 22,
                            fontWeight: 'bolder',
                            color: '#483d8b'
                        }
                    },
                    xAxis :{
                        type : 'category',
                        position: 'bottom',
                        boundaryGap: true,
                        axisLabel : {
                            interval: 0,    // {number}
                        },
                        <!--axisLine : {    // 轴线-->
                            <!--show: true,-->
                            <!--lineStyle: {-->
                                <!--color: 'green',-->
                                <!--type: 'solid',-->
                                <!--width: 2-->
                            <!--}-->
                        <!--},-->
                        <!--axisTick : {    // 轴标记-->
                            <!--show:true,-->
                            <!--length: 10,-->
                            <!--lineStyle: {-->
                                <!--color: 'red',-->
                                <!--type: 'solid',-->
                                <!--width: 2-->
                            <!--}-->
                        <!--},-->
                        <!--splitLine : {-->
                            <!--show:true,-->
                            <!--lineStyle: {-->
                                <!--color: '#483d8b',-->
                                <!--type: 'dashed',-->
                                <!--width: 1-->
                            <!--}-->
                        <!--},-->
                        <!--splitArea : {-->
                            <!--show: true,-->
                            <!--areaStyle:{-->
                                <!--color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']-->
                            <!--}-->
                        <!--},-->
                        data : name_array
                    },
                    yAxis :
                        {
                            type : 'value',
                            position: 'left',
                            min: 0,
                            max: max_number,
                            //splitNumber: 10,
                            boundaryGap: [0,0.1],
                            <!--axisLine : {    // 轴线-->
                                <!--show: true,-->
                                <!--lineStyle: {-->
                                    <!--color: 'red',-->
                                    <!--type: 'dashed',-->
                                    <!--width: 2-->
                                <!--}-->
                            <!--},-->
                            <!--axisTick : {    // 轴标记-->
                                <!--show:true,-->
                                <!--length: 10,-->
                                <!--lineStyle: {-->
                                    <!--color: 'green',-->
                                    <!--type: 'solid',-->
                                    <!--width: 2-->
                                <!--}-->
                            <!--},-->
                            <!--axisLabel : {-->
                                <!--show:true,-->
                                <!--interval: 'auto',    // {number}-->
                                <!--rotate: -45,-->
                                <!--margin: 18,-->
                                <!--formatter: '{value} ',    // Template formatter!-->
                                <!--textStyle: {-->
                                    <!--color: '#1e90ff',-->
                                    <!--fontFamily: 'verdana',-->
                                    <!--fontSize: 10,-->
                                    <!--fontStyle: 'normal',-->
                                    <!--fontWeight: 'bold'-->
                                <!--}-->
                            <!--},-->
                            <!--splitLine : {-->
                                <!--show:true,-->
                                <!--lineStyle: {-->
                                    <!--color: '#483d8b',-->
                                    <!--type: 'dotted',-->
                                    <!--width: 2-->
                                <!--}-->
                            <!--},-->
                            <!--splitArea : {-->
                                <!--show: true,-->
                                <!--areaStyle:{-->
                                    <!--color:['rgba(205,92,92,0.3)','rgba(255,215,0,0.3)']-->
                                <!--}-->
                            <!--}-->
                    },
                    series : [
                        {
                        name:'DailyTest信息',
                        type:'bar',
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = [
                                        '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
                                        '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
                                        '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
                                        '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0',
                                        '#008000'
                                    ];
                                    return colorList[params.dataIndex]
                                },
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: '{c}',
                                    textStyle: {
                                        fontSize: 20
                                    }
                                }
                            }
                        },
                        data: number_array
                        }
                    ]
                };
                clearTimeout(loadingTicket);
                var loadingTicket = setTimeout(function() {
                    barChart.hideLoading();
                    barChart.setOption(option);
                }, 50);
            }
        );
    </script>
    <script type="text/javascript">
      $("#menu_1 dt").addClass("selected");$("#menu_1 dd").show();;
    </script>

{% endblock %}

